import { Component, OnInit } from '@angular/core';
import { NavController,AlertController,ToastController } from '@ionic/angular';

@Component({
  selector: 'app-c03',
  templateUrl: './c03.page.html',
  styleUrls: ['./c03.page.scss'],
})
export class C03Page implements OnInit {

  constructor(public navCtrl: NavController,private alertCtrl:AlertController,private toastCtrl:ToastController) { }

  resultMessage: string = '';
  radioOpen: boolean = true;
  radioResult: string;
  checkboxOpen: boolean;
  checkboxResult: string;
  card: HTMLIonCardElement;

  async showAlert() {
    this.card.style.display = "none";
    let alert = this.alertCtrl.create({
      header: 'Welcome',
      subHeader: '欢迎访问！',
      buttons: ['确定']
    });
    (await alert).present();
  }

  async showConfirm() {
    let confirm = this.alertCtrl.create({
      header: '你确定要离开吗?',
      message: '数据尚未保存，如果此时离开，所有为保存的数据都会丢失！',
      buttons: [
        {
          text: '取消', handler: () => {
            this.resultMessage = '单击了取消按钮';
            this.card.style.display = "block";
          }
        },
        {
          text: '确认', handler: () => {
            this.resultMessage = '单击了确认按钮';
            this.card.style.display = "block";
          }
        }
      ]
    });
    (await confirm).present();
  }
  async showPrompt() {

    let prompt = this.alertCtrl.create({
      header: '登录',
      message: '请在下方输入你已经注册过的用户名。如果尚未注册，请先注册！',
      inputs: [
        {name:'username',placeholder:'用户名'},
      ],
      buttons: [
        {
          text: '取消', handler: () => {
            this.resultMessage = '单击了取消按钮';
            this.card.style.display = "block";
          }
        },
        {
          text: '确认', handler: (data:any) => {
            this.resultMessage = '输入的用户名：' + data['username'];
            this.card.style.display = "block";
          }
        }
      ]
    });
    (await prompt).present();
  }
  async showRadio() {
    this.resultMessage = '';
    let alert = this.alertCtrl.create({
      header: '请选择颜色',
      inputs: [
        { type: 'radio', label: '红色', value: '红色' },
        { type: 'radio', label: '绿色', value: '绿色', checked: true },
        { type: 'radio', label: '蓝色', value: '蓝色' }
      ],
      buttons: [
        {
          text: '取消', handler: (data:any) => {
            this.resultMessage = '单击了取消按钮';
            this.card.style.display = "block";
          }
        },
        {
          text: '确认', handler: (data: any) => {
            this.radioOpen = false;
            this.radioResult = data;
            this.resultMessage = '单选结果：' + data;
            this.card.style.display = "block";
          }
        }
      ]
    });
    (await alert).present();
  }
  async showCheckbox() {
    this.resultMessage = '';
    let alert = this.alertCtrl.create({
      header: '你参加过哪些项目?',
      inputs: [
        { type: 'checkbox', label: '足球', value: '足球' },
        { type: 'checkbox', label: '篮球', value: '篮球' },
        { type: 'checkbox', label: '排球', value: '排球' }
      ],
      buttons: [
        {
          text: '取消', handler: (data: any) => {
            this.resultMessage = '单击了取消按钮';
            this.card.style.display = "block";
          }

        },
        {
          text: '确认', handler: (data: any) => {
            this.resultMessage = '复选结果：' + data;
            this.checkboxOpen = false;
            this.checkboxResult = data;
            this.card.style.display = "block";
          }
        }
      ]
    });
    (await alert).present();
  }
  async presentToast() {
    this.card.style.display = "none";
    let toast = this.toastCtrl.create({
      message: "数据保存成功！",
      duration: 3000,
      position: 'bottom'
    });
    (await toast).present();
  }
  ngOnInit() {
    this.card = document.getElementById("card") as HTMLIonCardElement;
  }

}
